<template>
  <div class="view-wrapper">
    <!-- <el-button @click="modify" type="primary">添加</el-button> -->
    <div class="head">
      <el-button type="primary" style="margin-bottom: 20px" @click="add"
        >新增收银播报</el-button
      >
    </div>
    <div class="listBox">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button
            v-if="scope.row.merchantName == ''"
            type="primary"
            @click="binding(scope.row)"
            size="small"
            >绑定收款ID</el-button
          >
          <el-button
            v-if="scope.row.merchantName != ''"
            @click="unbound(scope.row)"
            size="small"
            >解绑收款ID</el-button
          >
          <el-button
            v-if="scope.row.shopName != '-'"
            @click="setDelete(scope.row)"
            type="danger"
            size="small"
            >删除</el-button
          >
        </template>
      </ex-table>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :rules="rules" :model="ruleForm" ref="ruleForm">
        <el-form-item
          label="收银机ID："
          :label-width="formLabelWidth"
          prop="equipmentNo"
        >
          <el-input
            placeholder="请输入"
            v-model="ruleForm.equipmentNo"
            class="input-with-select"
            maxlength="50"
            show-word-limit
            v-if="status != 2"
          >
          </el-input>
          <div v-if="status == 2">{{ info.equipmentNo }}</div>
        </el-form-item>
        <el-form-item label="绑定店铺名称：" :label-width="formLabelWidth">
          <el-select
            v-model="value"
            filterable
            placeholder="请选择"
            @change="change"
            style="width: 85%"
            v-if="status != 2"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item"
            >
            </el-option>
          </el-select>
          <div v-if="status == 2">{{ info.shopName }}</div>
        </el-form-item>
        <el-form-item label="对应绑定收款ID：" :label-width="formLabelWidth">
          <div>{{ collectionId }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="sumit('ruleForm')"
          v-if="status == 1"
          :loading="buttonLoding"
          >保 存</el-button
        >
        <el-button
          type="primary"
          @click="unboundSumit"
          v-if="status == 2"
          :loading="buttonLoding"
          >解 绑</el-button
        >
        <el-button
          type="primary"
          @click="bindingSumit"
          v-if="status == 3"
          :loading="buttonLoding"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
// components
import {
  equipmentLs,
  shopSelectDown,
  equipmentAdd,
  equipmentDetail,
  unboundSumit,
  equipmentUpdate,
  equipmentDelete,
} from "@/api/clientManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      dialogTitle: "新增收银播报",
      rules: {
        equipmentNo: [
          { required: true, message: "请输入收银机ID", trigger: "blur" },
        ],
      },
      buttonLoding: false,
      loading: false,
      dialogFormVisible: false,
      value: "",
      options: [],
      formLabelWidth: "150px",
      tableData: [],
      ruleForm: {
        merchantId: "", //商家id
        equipmentNo: "", //设备编号
        merchantName: "", //商家名称
      },
      info: {},
      collectionId: "-", //收款码id
      tableColumn: [
        { prop: "equipmentNo", label: "收银机ID（硬件）" },
        { prop: "payNo", label: "绑定收款ID" },
        { prop: "merchantName", label: "绑定商家账号" },
        { prop: "shopName", label: "绑定店铺名称" },
        { prop: "bindingTime", label: "绑定时间" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "280",
          fixed: "right",
        },
      ],
      status: 1, //弹窗状态
      id: "",
    };
  },
  created() {
    this.getselectList();
    this.getList();
  },
  computed: {},
  methods: {
    getList() {
      const params = {
        ...this.pageOptions,
      };
      this.loading = true;
      equipmentLs(params)
        .then((res) => {
          // res.result.forEach((item) => {
          //   if (item.shopName == "") {
          //     item.shopName = "-";
          //   } else {
          //     item.isShow = item.shopName;
          //   }
          // });
          this.tableData = res.result.records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sumit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.buttonLoding = true;
          var params = {
            ...this.ruleForm,
          };
          equipmentAdd(params)
            .then((res) => {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
              });
              this.buttonLoding = false;
              this.dialogFormVisible = false;
              setTimeout(() => {
                this.getselectList();
                this.getList();
              }, 800);
            })
            .finally(() => {
              this.buttonLoding = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add(row) {
      this.dialogTitle = "新增收银播报";
      this.status = 1;
      this.ruleForm.equipmentNo = "";
      this.collectionId = "-";
      this.value = "";
      this.dialogFormVisible = true;
    },
    unbound(row) {
      //解绑弹窗
      console.log(row);
      this.dialogTitle = "解绑收款ID";
      this.status = 2;
      this.dialogFormVisible = true;
      let id = row.id;
      equipmentDetail(id)
        .then((res) => {
          this.info = res.result;
          this.collectionId = res.result.payNo;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    unboundSumit() {
      //解绑
      this.buttonLoding = true;
      unboundSumit(this.info.id)
        .then((res) => {
          this.$message({
            message: "解绑成功",
            type: "success",
            duration: 800,
          });
          this.buttonLoding = false;
          this.dialogFormVisible = false;
          setTimeout(() => {
            this.getselectList();
            this.getList();
          }, 1000);
        })
        .finally(() => {
          this.loading = false;
          this.buttonLoding = false;
        });
    },
    binding(row) {
      //绑定equipmentUpdate
      this.dialogTitle = "绑定付款ID";
      this.collectionId = "-";
      this.value = "";
      this.status = 3;
      this.dialogFormVisible = true;
      this.ruleForm.equipmentNo = row.equipmentNo;
      this.id = row.id;
    },
    bindingSumit() {
      //绑定提交
      this.buttonLoding = true;
      const params = {
        ...this.ruleForm,
        id: this.id,
      };
      equipmentUpdate(params)
        .then((res) => {
          this.$message({
            message: "绑定成功",
            type: "success",
            duration: 1500,
          });
          this.buttonLoding = false;
          this.dialogFormVisible = false;
          setTimeout(() => {
            this.getselectList();
            this.getList();
          }, 1000);
        })
        .finally(() => {
          this.loading = false;
          this.buttonLoding = false;
        });
    },
    change(e) {
      let additionalValue = JSON.parse(e.additionalValue);
      if (additionalValue.payNo == "") {
        this.collectionId = "-";
      } else {
        this.collectionId = additionalValue.payNo;
      }
      console.log(additionalValue);
      this.ruleForm.merchantId = e.id;
      this.ruleForm.merchantName = additionalValue.merchantName;
    },
    getselectList() {
      //获取店铺
      const params = {};
      this.loading = true;
      shopSelectDown(params)
        .then((res) => {
          this.options = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setDelete(e) {
      //删除
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          equipmentDelete(e.id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getList();
                this.getselectList();
              }, 800);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
::v-deep.el-input--medium .el-input__inner {
  width: 85% !important;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>
